<!DOCTYPE html>
<html lang="en">
<head>
<!--    zpl-->
    <meta charset="UTF-8">
    <title>报表统计</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form :inline="true"  class="demo-form-inline" style="display: flex;align-items: center">
                <el-form-item label="收货状态" style="margin-left: 10px">
                    <el-input v-model="status" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="block">
                        <el-date-picker
                                v-model="date"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary" @click.prevent="query(1)">查询</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="tableData.data" style="width: 100%">
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="amount" label="总价"></el-table-column>
                <el-table-column prop="status" label="状态"></el-table-column>
                <el-table-column prop="date" label="日期"></el-table-column>
                <el-table-column prop="site" label="收货地址"></el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <el-pagination style="text-align: center" :current-page="currentPage" :page-size="pageSize" @current-change="query" @size-change="sizeChange"
                           background :page-sizes="[5, 10, 20, 50]"
                           layout="sizes, prev, pager, next"
                           :total="tableData.total">
            </el-pagination>
        </el-footer>
    </el-container>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data : {
            status : "",
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            date: "",
            tableData: {},
            currentPage: 1,
            pageSize: 5,

        },
        created(){
            this.query(1)
        },
        methods: {
            sizeChange(size){
                this.pageSize = size;
                this.query(1);
            },
            query(page){
                var statu = "";
                if (this.status == "已付款"){
                    statu = 1;
                }else if (this.status == "已发货"){
                    statu = 2;
                }else  if (this.status == "已收货"){
                    statu = 3;
                }else if (this.status == "已评价"){
                    statu = 4;
                }else if (this.status == "未付款"){
                    statu = 0;
                }else if (this.status != ""){
                    this.$message("不合法参数!");
                }
                axios.get("../QueryOrderServlet.s",{
                    params : {
                        status: statu,
                        begin: this.date != ""?(new Date(this.date[0]).toLocaleDateString().replaceAll(/\//g,"-")) : null,
                        end: this.date != ""?(new Date(this.date[1]).toLocaleDateString().replaceAll(/\//g,"-")) : null,
                        currentPage: page,
                        pageSize: this.pageSize
                    }
                }).then(res=>{
                    console.log(res.data.data)
                    res.data.data.data.forEach(item=>{
                        if (item.status == 1){
                            item.status = "已付款";
                        }else if (item.status == 2){
                            item.status = "已发货";
                        }else  if (item.status == 3){
                            item.status = "已收货";
                        }else if (item.status == 4){
                            item.status = "已评价";
                        }
                    })
                    this.tableData = res.data.data;

                    this.currentPage = page;
                    this.status = "";
                    this.date = "";
                })
            },

        }
    })
</script>
</body>
<style>
    html,body,#app{
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    .el-container{
        height: 100%;
    }
    .el-main {
        height: 100%;
    }
</style>
</html>